@import '~@sourcegraph/react-loading-spinner/lib/LoadingSpinner.css';

.hover-overlay {
    position: absolute;
    min-width: 6rem;
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 100;

    $animation-duration: 100ms;
    transition: opacity $animation-duration ease-in-out;

    &__close-button {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.25rem;
        border-radius: 0;
        background: transparent;
        z-index: 1;
        border: none;
        opacity: 0;
        transition: opacity $animation-duration ease-in-out;
    }
    &:hover &__close-button {
        opacity: 1;
    }

    &__row {
        display: block;
        width: 100%;
        margin: 0;
        &:not(:first-child) {
            border-top: 1px solid var(--border-color);
        }
    }

    &__contents {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    &__alert {
        padding: 0.5rem;
    }

    &__alert-close {
        float: right;
    }

    // __content elements are a subset of the __row elements
    // (the ones that contain markdown or code, but not errors or the actions)
    &__content {
        max-height: 15rem;
        padding: 0.5rem;
        overflow-x: auto;
        word-wrap: normal;

        // Descendant selectors are needed here to style rendered markdown
        // stylelint-disable selector-max-compound-selectors

        // <hr>s must looks the same as using the using multiple deprecated MarkedStrings
        hr {
            margin: 0.5rem -0.5rem;
            background: var(--border-color);
            border: none;
            // The <hr> acts like a border, which should always be exactly 1px
            // stylelint-disable-next-line declaration-property-unit-whitelist
            height: 1px;
        }
        p,
        pre {
            margin-bottom: 0.5rem;
            overflow: auto;
            &:last-child {
                margin-bottom: 0;
            }
        }
        code {
            white-space: pre;
        }
        // stylelint-enable selector-max-compound-selectors
    }

    &__actions {
        flex: 0 0 auto;
        display: flex;
    }

    &__action:not(:first-child) {
        border-left: 1px solid var(--border-color);
    }

    &__action {
        text-align: center;
        border: none;
    }

    &__action,
    &__actions-placeholder {
        flex: 1 1 auto;
        border-radius: 0;
    }

    &__loader-row {
        text-align: center;
    }

    &__loader-row,
    &__hover-error,
    &__content-error,
    &__alert-below {
        padding: 0.5rem;
    }

    &__alert-below {
        margin: 0;
        overflow-y: auto;
    }
}
